<template>
	<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
		<div class="site-navbar__header">
			<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
				<a class="site-navbar__brand-lg" href="javascript:;"><img style="height: 30px;" src="../../../assets/img/渣男小四logo.png" alt="" /></a>
<!--				<a class="site-navbar__brand-mini" href="javascript:;"><img style="height: 30px;" src="../../../assets/img/logo-hua.png" alt="" /></a>-->
			</h1>
		</div>
		<div class="site-navbar__body clearfix">
			<el-menu class="site-navbar__menu" mode="horizontal">
				<el-menu-item class="site-navbar__switch" index="0" @click="$router.push({ name: 'TangShi' })">
					<img src="../../../assets/icon/房子.png" />
					堂食
				</el-menu-item>
			</el-menu>
			<el-menu class="site-navbar__menu" mode="horizontal">
				<el-menu-item class="site-navbar__switch" index="0" @click="$router.push({ name: 'KuaiCan' })">
					<img src="../../../assets/icon/快餐.png" />
					快餐
				</el-menu-item>
			</el-menu>
			<el-menu class="site-navbar__menu" mode="horizontal">
				<el-menu-item class="site-navbar__switch" index="0" @click="$router.push({ name: 'WaiMai' })">
					<img src="../../../assets/icon/外卖.png" />
					外卖
				</el-menu-item>
			</el-menu>
			<el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
				<el-menu-item index="1" @click="$router.push({ name: 'home' })">
					<template slot="title">
						<div>
							<img src="../../../assets/icon/后台管理.png" />
							后台管理
						</div>
					</template>
				</el-menu-item>
				<el-menu-item class="site-navbar__avatar" index="3">
					<el-dropdown :show-timeout="0" placement="bottom">
						<span class="el-dropdown-link">
							<img src="~@/assets/img/avatar.png" :alt="userName" />
							{{ userName }}
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<el-menu-item index="2"  @click.native="updatePasswordHandle()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/修改.png" />
											修改密码
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-menu-item index="2"  @click.native="logoutHandle()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/退出.png" />
											退出
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-menu-item index="2" @click.native="changeSeller()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/切换.png" />
											切换门店
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-menu-item index="6" @click.native="tableThemeSet()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/主题.png" />
											餐台主题配置
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-menu-item index="3" @click.native="jiaoban()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/财务.png" />
											交班
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-menu-item index="6" @click.native="tableThemeSet()">
									<template slot="title">
										<div>
											<img src="../../../assets/icon/语音.png" />
											系统语音配置
										</div>
									</template>
								</el-menu-item>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-menu-item>
			</el-menu>
		</div>

		<!-- 弹窗, 修改密码 -->
		<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>

		<!-- 门店列表 -->
		<ChangeSeller v-if="chooseStoreVisible" ref="chooseStoreRef"></ChangeSeller>

		<ChangeWork ref="ChangeWorkRef"></ChangeWork>

		<TableThemeSet @refreshDataList="refresh" ref="TableThemeSetRef"></TableThemeSet>
	</nav>
</template>

<script>
import { clearLoginInfo } from '@/utils';
import UpdatePassword from '../../main-navbar-update-password.vue';
import ChangeSeller from '../../change-seller.vue';
import ChangeWork from '../../change-work.vue';
import TableThemeSet from '../../table_theme_set.vue';
export default {
	data() {
		return {
			updatePassowrdVisible: false,
			chooseStoreVisible: false
		};
	},
	components: {
		UpdatePassword,
		ChangeSeller,
		ChangeWork,
		TableThemeSet
	},
	computed: {
		navbarLayoutType: {
			get() {
				return this.$store.state.common.navbarLayoutType;
			}
		},
		sidebarFold: {
			get() {
				return this.$store.state.common.sidebarFold;
			},
			set(val) {
				this.$store.commit('common/updateSidebarFold', val);
			}
		},
		mainTabs: {
			get() {
				return this.$store.state.common.mainTabs;
			},
			set(val) {
				this.$store.commit('common/updateMainTabs', val);
			}
		},
		userName: {
			get() {
				return this.$store.state.user.name;
			}
		}
	},
	methods: {
		refresh() {
			this.$emit('refreshDataList');
		},

		//餐台主题配置
		tableThemeSet() {
			this.$nextTick(() => {
				this.$refs.TableThemeSetRef.init();
			});
		},

		//交班
		jiaoban() {
			this.changeWorkVisible = true;
			this.$nextTick(() => {
				this.$refs.ChangeWorkRef.getData();
			});
		},

		changeSeller() {
			this.chooseStoreVisible = true;
			this.$nextTick(() => {
				this.$refs.chooseStoreRef.getDataList();
			});
		},
		// 修改密码
		updatePasswordHandle() {
			this.updatePassowrdVisible = true;
			this.$nextTick(() => {
				this.$refs.updatePassowrd.init();
			});
		},
		// 退出
		logoutHandle() {
			this.$confirm(`确定进行[退出]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl('/sys/logout'),
						method: 'post',
						data: this.$http.adornData()
					}).then(({ data }) => {
						if (data && data.code === 0) {
							clearLoginInfo();
							this.$router.push({ name: 'login' });
						}
					});
				})
				.catch(() => {});
		}
	}
};
</script>
